<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Alert 提示</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style type="text/css">
.el-alert {
  margin: 20px 0 0;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">用于页面中展示重要的提示信息。Alert 组件不属于浮层元素，不会自动消失或关闭。</p>
	<p class="desc">Alert 组件提供四种类型，由 type 属性指定，默认值为 info。</p>
	<el-alert title="success alert" type="success"></el-alert>
	<el-alert title="info alert" type="info"></el-alert>
	<el-alert title="warning alert" type="warning"></el-alert>
	<el-alert title="error alert" type="error"></el-alert>
	
	<el-divider content-position="left">主题</el-divider><!-- =============================================================== -->
	<p class="desc">Alert 组件提供了两个不同的主题：light 和 dark。</p>
	<p class="desc">通过设置 effect 属性来改变主题，默认为 light。</p>
	<el-alert effect="dark" title="success alert" type="success"></el-alert>
	<el-alert effect="dark" title="info alert" type="info"></el-alert>
	<el-alert effect="dark" title="warning alert" type="warning"></el-alert>
	<el-alert effect="dark" title="error alert" type="error"></el-alert>
	
	<el-divider content-position="left">自定义关闭按钮</el-divider><!-- =============================================================== -->
	<p class="desc">你可以自定义关闭按钮为文字或其他符号。你可以设置 Alert 组件是否为可关闭状态， 关闭按钮的内容以及关闭时的回调函数同样可以定制。</p>
	<p class="desc">closable 属性决定 Alert 组件是否可关闭， 该属性接受一个 Boolean，默认为 false。 你可以设置 close-text 属性来代替右侧的关闭图标， 需要注意的是 close-text 必须是一个字符串。 当 Alert 组件被关闭时会触发 close 事件。</p>
	<el-alert title="unclosable alert" type="success" :closable="false"></el-alert>
	<el-alert title="customized close-text" type="info" close-text="关闭"></el-alert>
	<el-alert title="alert with callback" type="warning" @close="alertClose"></el-alert>
	
	<el-divider content-position="left">使用图标</el-divider><!-- =============================================================== -->
	<p class="desc">你可以通过为 Alert 组件添加图标来提高可读性。</p>
	<p class="desc">通过设置 show-icon 属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。</p>
	<el-alert show-icon title="success alert" type="success"></el-alert>
	<el-alert show-icon title="info alert" type="info"></el-alert>
	<el-alert show-icon title="warning alert" type="warning"></el-alert>
	<el-alert show-icon title="error alert" type="error"></el-alert>
	
	<el-divider content-position="left">文字居中</el-divider><!-- =============================================================== -->
	<p class="desc">使用 center 属性来让文字水平居中。</p>
	<el-alert show-icon center title="success alert" type="success"></el-alert>
	<el-alert show-icon center title="info alert" type="info"></el-alert>
	<el-alert show-icon center title="warning alert" type="warning"></el-alert>
	<el-alert show-icon center title="error alert" type="error"></el-alert>
	
	<el-divider content-position="left">文字描述</el-divider><!-- =============================================================== -->
	<p class="desc">为 Alert 组件添加一个更加详细的描述来使用户了解更多信息。</p>
	<p class="desc">除了必填的 title 属性外，你可以设置 description 属性来帮助你更好地介绍，我们称之为辅助性文字。 辅助性文字只能存放文本内容，当内容超出长度限制时会自动换行显示。</p>
	<el-alert title="这是标题" type="success" description="这是文字描述。。。"></el-alert>
	
	<el-divider content-position="left">带图标和描述</el-divider><!-- =============================================================== -->
	<p class="desc">在最后, 这是一个带有图标和描述的例子。</p>
	<el-alert show-icon title="success alert" type="success" description="more text description"></el-alert>
	<el-alert show-icon title="info alert" type="info" description="more text description"></el-alert>
	<el-alert show-icon title="warning alert" type="warning" description="more text description"></el-alert>
	<el-alert show-icon title="error alert" type="error" description="more text description"></el-alert>
	
	<el-divider content-position="left">使用插槽</el-divider><!-- =============================================================== -->
	<p class="desc">使用插槽将会更灵活。（这是自己加上去的）</p>
	<el-alert type="success">
		<template #title>
			<i style="color: red;font-weight: bold;">自定义标题</i>
		</template>
		<p>这里放任意内容，比如一个表格</p>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column v-if="true" prop="date" label="Date" width="180" class-name="color-primary"></el-table-column>
			<el-table-column prop="name" label="Name" width="180" show-overflow-tooltip></el-table-column>
			<el-table-column prop="address" label="Address" min-width="180"></el-table-column>
		</el-table>
	</el-alert>
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			message: 'Hello Vue!!',
			tableData: [
				{date: '2016-05-03', name: 'Tom1', address: 'No. 181, Grove St',},
				{date: '2016-05-04', name: 'Tom2', address: 'No. 182, Grove St',},
				{date: '2016-05-05', name: 'Tom3', address: 'No. 183, Grove St',},
				{date: '2016-05-06', name: 'Tom4', address: 'No. 184, Grove St',},
			],
		}
	},
	methods:{
		alertClose(){
			console.log('alertClose');
		},
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>